<template>
     <div style="width:1100px;height:350px;border:1px solid #ccc;margin:10px" ref="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data(){
        return{
            months:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            sales:[0,45,33,21,67,78,43,42,56,55,89,0],
            sales1:[10,75,63,51,97,108,73,72,86,85,119,0]
        }
    },
    computed:{
        options(){
           return{
             title:{
                text:'某公司全年销售情况',
                link:'http://www.zhaijizhe.cn',
                subtext:'日用生活品销售情况'
             },
             legend:{},
             xAxis:{
                data:this.months
             },
             yAxis:{},
             series:[
                {
                    name:'销售量',
                    type:'line',
                    data:this.sales,
                    smooth:true,
                    symbol:'none',
                    areaStyle:{
                        color:'rgba(159,216,255,.9)'
                    },
                    lineStyle:{
                        color:'rgba(159,216,255,.9)',
                        width:2
                    }
                },
                {
                    name:'收入',
                    type:'line',
                    data:this.sales1,
                    smooth:true,
                    symbol:'none',
                    areaStyle:{
                        color:'rgba(120,215,190,.9)'
                    },
                    lineStyle:{
                        color:'rgba(120,215,190,.9)',
                        width:2
                    }
                }
             ]
           }
        }
    },
    mounted(){
        const mychart=echarts.init(this.$refs.main)
        mychart.setOption(this.options)
    }
}
</script>

<style>

</style>